<template>
    <div class="flex bottomBox">
        <div class="boxShadow stationCom" id="stationBox" ref="stationBox" >
            <div class="stationBox">
                <div class="goHere" @click="goHere()"></div>
                <div class="touchBox">
                    <p class="boldTitle padding_0_20" @mousedown="down"
                    @mousemove="move"
                    @mouseup="end" 
                    @touchstart="down" 
                    @touchmove="move" 
                    @touchend="end">
                    {{this.$store.state.stationName}}
                    </p>
                    <div class="flex padding_0_20 modulContent" v-show="false">
                        <div class="flex" @click="editStationBtn">
                            <div class="comIcon iconEdit"></div>编辑
                        </div>
                        <div class="flex" @click="delStationBtn">
                            <div class="comIcon iconDel"></div>删除
                        </div>
                        <div class="flex" @click="addStationBtn">
                            <div class="comIcon iconAdd"></div>添加
                        </div>
                    </div>

                    <div class="detailTitle">
                        站点详情
                    </div>
                </div>
                <!-- 站点详情 -->
                <div class="detailBox" v-show="showDetail">
                    <div class="flex detailItem">
                        <div class="leftTitle">站点类型</div>
                        <div class="rightTRitle">{{stationType}}</div>
                    </div>

                    <div class="flex detailItem">
                        <div class="leftTitle">站点模式</div>
                        <div class="rightTRitle">{{stationMode}}</div>
                    </div>

                    <div class="flex detailItem">
                        <div class="leftTitle">范围</div>
                        <div class="rightTRitle">{{stationEnough}}</div>
                    </div>

                    <div class="flex detailItem">
                        <div class="leftTitle">超时时间</div>
                        <div class="rightTRitle">{{stationTimeout}}</div>
                    </div>

                    <div class="itemLocation">
                        <div class="itemTit">位置</div>
                        <div class="flex LocItem">
                            <div class="leftTitle">X</div>
                            <div class="rightTRitle">{{positionX}}</div>
                        </div>
                        <div class="flex LocItem">
                            <div class="leftTitle">Y</div>
                            <div class="rightTRitle">{{positionY}}</div>
                        </div>
                        <div class="flex LocItem">
                            <div class="leftTitle">Z</div>
                            <div class="rightTRitle">{{positionZ}}</div>
                        </div>
                    </div>
                    
                    <div class="itemLocation">
                        <div class="itemTit">姿态</div>
                        <div class="flex LocItem">
                            <div class="leftTitle">X</div>
                            <div class="rightTRitle">{{orientionX}}</div>
                        </div>
                        <div class="flex LocItem">
                            <div class="leftTitle">Y</div>
                            <div class="rightTRitle">{{orientionY}}</div>
                        </div>
                        <div class="flex LocItem">
                            <div class="leftTitle">Z</div>
                            <div class="rightTRitle">{{orientionZ}}</div>
                        </div>
                        <div class="flex LocItem yawBox">
                            <div class="leftTitle">Yaw</div>
                            <div class="rightTRitle yawData">{{orientionRAD}} RAD / {{orientionDEG}} DEG</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { TF, quaternionToYaw } from '../js/tf';
import { hideOtherModule, navNewStation } from '../js/methods'
export default {
    name: 'station',
    components:{

    },
    data(){
        return{
            stationType: '',
            stationMode:'',
            stationEnough:'',
            stationTimeout:'',
            positionX:'',
            positionY:'',
            positionZ:'',
            orientionX:'',
            orientionY:'',
            orientionZ:'',
            orientionYaw:'',
            orientionRAD:'',
            orientionDEG:'',
            showDetail: false,
            flags: false,
            position: { x: 0, y: 0,endY:0 },
            stationHeight:''
        }
    },
    methods:{
        //点击站点去这里
        goHere(){
            if(window.localStorage.getItem('authorizationPassword')){
                navNewStation(this.$store.state.stationName)
            }else{
                this.$message({
                    showClose: true,
                    message: '暂无操作权限，请输入授权密码',
                    type: 'warning'
                });
            }
        },

        //点击编辑站点
        editStationBtn(){
            console.log("000")
            hideOtherModule('switchStationEdit')
            this.$store.commit('switchStationEdit',true)
        },

        //点击添加站点
        addStationBtn(){
            
        },

        //点击删除站点
        delStationBtn(){
            if(window.localStorage.getItem('authorizationPassword')){
                hideOtherModule('switchDelStation')
               this.$store.commit('switchDeleteStation',true)
            }else{
                this.$message({
                    showClose: true,
                    message: '暂无操作权限，请输入授权密码',
                    type: 'warning'
                });
            }        
        },

        // 实现移动端拖拽
        down(event){
            //站点类型转换
            let stationInfo = JSON.parse(this.$store.state.stationDetail);
            let stationDetails = JSON.parse(stationInfo.header.frame_id);
            this.stationType = stationDetails.type;
            this.stationMode = stationDetails.failure_mode;
            this.stationEnough = Number(stationDetails.close_enough).toFixed(3);
            this.stationTimeout = Number(stationDetails.goal_timeout).toFixed(3);
            this.positionX = Number(stationInfo.pose.position.x).toFixed(3);
            this.positionY = Number(stationInfo.pose.position.y).toFixed(3);
            this.positionZ = Number(stationInfo.pose.position.z).toFixed(3);
            this.orientionX = Number(stationInfo.pose.orientation.x).toFixed(3);
            this.orientionY = Number(stationInfo.pose.orientation.y).toFixed(3);
            this.orientionZ = Number(stationInfo.pose.orientation.z).toFixed(3);
            this.orientionYaw = Number(stationInfo.pose.orientation.yaw).toFixed(3);
            var yaw = quaternionToYaw(stationInfo.pose.orientation);
            var yawDeg = yaw / Math.PI * 180;
            this.orientionRAD = Number(yaw).toFixed(3);
            this.orientionDEG = Number(yawDeg).toFixed(3);  


            this.flags = true;
            var touch;
            if(event.touches){
                touch = event.touches[0];
            }else {
                touch = event;
            }
            //手势坐标
            this.position.y = touch.clientY;
            let moveDiv = document.getElementById("stationBox");

            //盒子坐标
            this.dx = moveDiv.offsetLeft;
            this.dy = moveDiv.offsetTop;
            this.stationHeight = this.$refs.stationBox.style.height;
        },

        //拖拽移动
        move(event){
            const that = this;
            let moveDiv = document.getElementById("stationBox");
            if(this.flags){
                var touch ;
                if(event.touches){
                    touch = event.touches[0];
                }else {
                    touch = event;
                }

                //跟随手势移动
                moveDiv.style.top = touch.clientY + 'px';
                that.position.endY = touch.clientY;

                //阻止页面的滑动默认事件；如果碰到滑动问题，1.2 请注意是否获取到 touchmove
                document.addEventListener("touchmove",function(){
                    event.preventDefault();
                },false);
            }
        },

        //鼠标释放时候的函数
        end(event){
            const that = this;
            let moveDiv = document.getElementById("stationBox");
            if(that.position.endY > that.position.y){
                that.showDetail = false;
                moveDiv.style.top =that.stationHeight;
            }else{
                that.showDetail = true;
                moveDiv.style.top = that.stationHeight;
            }
        },
    },

    mounted(){
        
    },

    //属性监听
    watch:{
       
    }

}
</script>

<style scoped lang="less">
 .stationCom{
     width: 100%;
     background-color: #ffffff;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     padding: 0 0 10px 0;
     text-align: left;
     font-size: 14px;
     touch-action: none;
 }
 .touchBox{
     touch-action: none;
 }
 .goHere{
     position: absolute;
     width: 50px;
     height: 50px;
     background: url("../../src/assets/go.png") no-repeat center;
     background-size: cover;
     right: 0px;
     top: -25px;
 }
 .stationBox{
     position: relative;
 }
 .boldTitle{
     padding-top: 15px;
     padding-bottom: 15px;
     font-weight: bold;
     font-size: 18px;
 }
 .modulContent{
     margin: 0 0 15px 0;
     justify-content: space-between;
     font-size: 14px;
 }
 .comIcon{
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     width: 13px;
     height: 13px;
     margin-right: 5px;
 }
 .iconEdit{
     background-image: url("../../src/assets/icon-edit-nor.png")
 }
 .iconDel{
     background-image: url("../../src/assets/icon-del-nor.png")
 }
 .iconAdd{
     background-image: url("../../src/assets/icon-add-nor.png")
 }
 .detailTitle{
     font-weight: bold;
     padding: 10px;
     border-top: 1px solid #eeeeee;
 }
 .detailBox{
     background-color: #eeeeee;
     max-height: 350px;
     overflow-y: scroll
 }
 .detailItem{
     background-color: #ffffff;
     justify-content: space-between;
     height: 35px;
     line-height: 35px;
     margin-top: 4.5px;
     padding: 0 10px;
 }
 .itemLocation{
     background-color: #ffffff;
     justify-content: space-between;
     margin-top: 1.5px;
 }
 .itemTit{
     line-height: 35px;
     margin-top: 4.5px;
     padding: 0 10px;
 }
 .LocItem{
     border-top: 1px solid #eeeeee;
     line-height: 35px;
     justify-content: space-between;
     padding: 0 10px 0 30px;
     &:last-child{
         border-bottom: none;
     }
 }
 .yawData{
     padding-left: 50px;
     word-wrap: break-word;
     word-break: break-all;
     line-height: 1
 }
</style>